<template>
  <div class="min-h-screen flex flex-col">
    <Header />
    <main class="flex-grow">
      <router-view />
    </main>
    <Footer />
    <ToastMessage v-if="toastMessage" :message="toastMessage" :type="toastType" />
  </div>
</template>

<script>
import Header from './components/Header.vue'
import Footer from './components/Footer.vue'
import ToastMessage from './components/ToastMessage.vue'
import { mapGetters } from 'vuex'

export default {
  name: 'App',
  components: {
    Header,
    Footer,
    ToastMessage
  },
  computed: {
    ...mapGetters(['error']),
    toastMessage() {
      return this.error
    },
    toastType() {
      return 'error'
    }
  },
  watch: {
    error(newVal) {
      if (newVal) {
        setTimeout(() => {
          this.$store.commit('SET_ERROR', null)
        }, 5000)
      }
    }
  }
}
</script>
    